<template>
	<!-- 合伙人 -->
	<view style="padding-bottom: 30rpx;">
		<u-navbar title="合伙人" placeholder :autoBack="true" leftIconColor="#E6A5B4" bgColor="#FFFFFF"
			:titleStyle="titleStyle">

		</u-navbar>
		<view class="topV">
			<image :src="userInfo.avatar"></image>
			<view style="align-items: center; justify-content: space-between; flex: 1; display: flex;">
				<view class="topVV">
					<view class="nameTv">{{userInfo.nickname}}</view>
					<text class="typeTv">{{copartnerData.role_name}}</text>
				</view>
				<view class="typeV" @click="onSwitchClick()">
					<view class="typeTv2">切换合伙人</view>
					<u-icon name="arrow-right" color="#fff" size="15"></u-icon>
				</view>
			</view>
		</view>

		<view class="fenhongV">
			<view class="fenhongTv1">{{copartnerData.bonus}}</view>
			<view class="fenhongTv2">元</view>
		</view>
		<view class="fenhongTv">当前分红</view>
		<view class="cenV">
			<view class="itemV">
				<view class="itemTv1">{{copartnerData.total_order}}</view>
				<view class="itemTv2">分红订单(笔)</view>
			</view>
			<view class="itemLine"></view>
			<view class="itemV" @click="onTuiGuangClick()">
				<view class="itemTv1">{{copartnerData.total_users}}</view>
				<view class="itemTv2">推广人数</view>
			</view>
		</view>

		<view class="zichanV">
			<view class="zichanTitle">我的资产</view>
			<view class="zichan">
				<view class="zichanItemV">
					<view class="zichanItemTv1">{{copartnerData.invest}}</view>
					<view class="zichanItemTv2">投资金额</view>
				</view>
				<view class="zichanLine"></view>
				<view class="zichanItemV" @click="onFenHongClick()">
					<view class="zichanItemTv1">{{copartnerData.total_bonus}}</view>
					<view class="zichanItemTv2">累计分红</view>
				</view>
				<view class="zichanLine"></view>
				<view class="zichanItemV">
					<view class="zichanItemTv1">{{copartnerData.total_tx}}</view>
					<view class="zichanItemTv2">累计提现</view>
				</view>
			</view>
		</view>

		<view class="zhanghuV">
			<view class="zhanghuTitle">我的账户</view>
			<view class="zhanghu">
				<view class="zhanghuItemV">
					<image class="zhanghuItemIv" src="../../static/me/yue.svg"></image>
					<view class="zhanghuItemTv">会员余额</view>
				</view>
				<view class="zhanghuItemV">
					<image class="zhanghuItemIv" src="../../static/me/fenhong.svg"></image>
					<view class="zhanghuItemTv">分红规则</view>
				</view>
				<view class="zhanghuItemV">
					<image class="zhanghuItemIv" src="../../static/me/tixian.svg"></image>
					<view class="zhanghuItemTv">提现规则</view>
				</view>
			</view>
		</view>

		<view class="zhanghuV">
			<view class="zhanghuTitle">扩大人脉</view>
			<view class="zhanghu">
				<view class="zhanghuItemV" @click="onKaQuanClick()">
					<image class="zhanghuItemIv" src="../../static/me/kaquan.svg"></image>
					<view class="zhanghuItemTv">领取卡券</view>
				</view>
				<view class="zhanghuItemV">
					<image class="zhanghuItemIv" src="../../static/me/bangding.svg"></image>
					<view class="zhanghuItemTv">绑定规则</view>
				</view>
				<view class="zhanghuItemV">
					<image class="zhanghuItemIv" src=""></image>
					<view class="zhanghuItemTv"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				userInfo: {},
				copartnerData: {},
				mRoleId:-1,
			}
		},
		onLoad(e) {
			this.mRoleId = e.id;
			this.userInfo = uni.getStorageSync("user_info");
			this.getCopartnerData();
		},
		methods: {
			getCopartnerData() {
				this.$api.getCopartnerData({
					role_id:this.mRoleId
				}).then((res) => {
					this.copartnerData = res;
				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
				})
			},
			onTuiGuangClick() { //推广
				this.$u.route({
					url: '/pages/me/Popularize',
					params: {
						id:this.mRoleId
					}
				})
			},
			onFenHongClick() { //累计分红
				this.$u.route({
					url: '/pages/me/Dividends',
					params: {
						money: this.copartnerData.total_bonus,
						id:this.mRoleId
					}
				})
			},
			onKaQuanClick() { //领取卡券
				this.$u.route({
					url: '/pages/me/Cards',
					params: {
						id:this.mRoleId
					}
				})
			},
			onSwitchClick(){//切换合伙人
				this.$u.route({
					url: '/pages/me/CopartnerSwitch',
				})
			},
			otherFun(id){
				console.log('======id======', id)
				this.mRoleId = id;
				this.getCopartnerData();
			}
		}
	}
</script>

<style lang="scss">
	.topV {
		display: flex;
		align-items: center;
		justify-content: left;
		margin-top: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background-color: antiquewhite;
		}

		.topVV {
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;

			.nameTv {
				flex: 1;
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.typeTv {
				border-radius: 30rpx;
				border: 1rpx solid #979797;
				font-size: 24rpx;
				color: #FFFFFF;
				padding-left: 20rpx;
				padding-right: 20rpx;
				padding-top: 5rpx;
				padding-bottom: 5rpx;
				margin-top: 20rpx;
			}
		}

		.typeV {
			display: flex;

			.typeTv2 {
				font-size: 32rpx;
				color: #FFFFFF;
				padding-left: 10rpx;
				padding-right: 10rpx;
			}
		}
	}

	.fenhongV {
		display: flex;
		align-items: center;
		justify-content: center;
		align-items: baseline;
		margin-top: 60rpx;

		.fenhongTv1 {
			font-size: 60rpx;
			color: #CEF743;
		}

		.fenhongTv2 {
			font-size: 32rpx;
			color: #FFFFFF;
			margin-left: 8rpx;
		}
	}

	.fenhongTv {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #939393;
		margin-top: 10rpx;
	}

	.cenV {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 50rpx;

		.itemLine {
			width: 1rpx;
			height: 70rpx;
			background: #383838;
		}

		.itemV {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.itemTv1 {
				font-size: 40rpx;
				color: #939393;
			}

			.itemTv2 {
				margin-top: 10rpx;
				font-size: 28rpx;
				color: #939393;
			}
		}
	}

	.zichanV {
		background: #1F1F1F;
		border-radius: 10rpx;
		padding: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 60rpx;

		.zichanTitle {
			font-size: 32rpx;
			color: #E8E8E8;
		}

		.zichan {
			display: flex;
			align-items: center;
			justify-content: center;

			.zichanLine {
				width: 1rpx;
				height: 70rpx;
				background: #383838;
			}

			.zichanItemV {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-top: 30rpx;

				.zichanItemTv1 {
					font-size: 40rpx;
					color: #939393;
				}

				.zichanItemTv2 {
					font-size: 32rpx;
					color: #939393;
					margin-top: 10rpx;
				}
			}
		}

	}

	.zhanghuV {
		background: #1F1F1F;
		border-radius: 10rpx;
		padding: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 60rpx;

		.zhanghuTitle {
			font-size: 32rpx;
			color: #E8E8E8;
		}

		.zhanghu {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 30rpx;

			.zhanghuItemV {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.zhanghuItemIv {
					width: 44rpx;
					height: 44rpx;
				}

				.zhanghuItemTv {
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #939393;
				}
			}
		}
	}
</style>
